<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./leader-line.min.js"></script>
    <script src="./anim-event.js"></script>
    <link rel="stylesheet" href="./default.css">
    <script src="tools.js"></script>
</head>
<body>
<div id="box">
    <div id="start" class="target" >start</div>
    <div id="end" class="target">end</div>
    <div id="start2" class="target" >start2</div>
    <div id="end2" class="target">end2</div>
</div>

<script>

    var startEle = document.getElementById('start');
    var endEle = document.getElementById('end');

    var startEle2 = document.getElementById('start2');
    var endEle2 = document.getElementById('end2');

    startEle.style.position="absolute"
    endEle.style.position="absolute"
    endEle.style.top=getTop(startEle)+startEle.clientHeight+2+"px"
    endEle.style.left=getLeft(startEle)+180+"px"

    startEle2.style.position="absolute"
    startEle2.style.left=startEle.style.left
    startEle2.style.top=endEle.style.top

    endEle2.style.position="absolute"
    endEle2.style.left=endEle.style.left
    endEle2.style.top=startEle.style.top

    let leader_line=f(startEle,endEle,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");

    const leader_line2 = f(startEle2, endEle2, kaishiyanse = '#ff3792', jieshuyanse = '#fff386', yanshi = "shixian");

    let leader_line3=f(startEle,endEle2,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");

    let boxObj=document.getElementById("box")
    boxObj.onmouseover=function (event) {//这个this是事件触发的元素
        if(event.target.classList.contains('target')){
            let add=document.createElement("div")
            add.style.position="absolute" //relative absolute
            add.style.left=event.target.offsetLeft+event.target.offsetWidth+"px"
            add.style.top=event.target.offsetTop+event.target.offsetHeight-30+"px"
            add.style.width=50+"px"
            add.style.height=30+"px"
            add.style.background="green"
            add.id=event.target.id+"AddId"
            add.innerHTML="create"

            boxObj.append(add)
        }
    }
    boxObj.onmouseout=function(event) {//这个this是事件触发的元素
        if(event.target.classList.contains('target')){
            var addEle = document.getElementById(event.target.id + "AddId");
            var x = event.clientX;
            var y = event.clientY;
            var divx1 = addEle.offsetLeft;  //距离边界的距离
            var divy1 = addEle.offsetTop; //距离边界的距离
            var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离
            var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离
            if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
                //鼠标小于左上点横方向
                //鼠标大于右下点横方向
                //鼠标小于左上点竖方向
                //鼠标大于右下点竖方向
                //此时鼠标不在这个模块中
                //那就可以删除了
                boxObj.removeChild(addEle)
            } else {
                //否则,鼠标在这个addEle模块中
                //那就不删除

                addEle.onclick = function (event) {
                    let newDiv = document.createElement("div")
                    //获取当前对象的位置
                    var addDivX = this.offsetLeft
                    var addDivY = this.offsetTop
                    newDiv.style.position = "absolute"
                    newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"
                    newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"
                    newDiv.style.width = 50 + "px"
                    newDiv.style.height = 30 + "px"
                    newDiv.style.background = "#00FF00"
                    newDiv.id = this.id.replace("AddId", "") + "NewDiv"
                    newDiv.className="target"

                    boxObj.append(newDiv)
                    let newDivLeadLine=f(document.getElementById(this.id.replace("AddId", "")),newDiv,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");
                }
                addEle.onmouseout = function (event) {
                    event.cancelBubble=true;//事件取消冒泡
                    boxObj.removeChild(event.target)
                    // this.id.replace("AddId", "")
                    // let divObj = document.getElementById(this.id.replace("AddId", ""));
                    // console.log(divObj)
                    // let x = event.clientX;
                    // let y = event.clientY;
                    // let divx1 = divObj.offsetLeft;  //距离边界的距离
                    // let divy1 = divObj.offsetTop; //距离边界的距离
                    // let divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离
                    // let divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离
                    // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
                    //     //移出了divObj,删除add模块
                    //     boxObj.removeChild(this)
                    // } else {//这说明,鼠标虽然移出了addDiv,但是马上进入了divObj区域内.说简单点就是,鼠标又回去了
                    //     //没移出divObj,不删除
                    // }
                }
            }
        }
        // var addEle = document.getElementById(event.target.id + "AddId");
        // var x = event.clientX;
        // var y = event.clientY;
        // var divx1 = addEle.offsetLeft;  //距离边界的距离
        // var divy1 = addEle.offsetTop; //距离边界的距离
        // var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离
        // var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离
        // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
        //     //鼠标小于左上点横方向
        //     //鼠标大于右下点横方向
        //     //鼠标小于左上点竖方向
        //     //鼠标大于右下点竖方向
        //     //此时鼠标不在这个模块中
        //     //那就可以删除了
        //     boxObj.removeChild(addEle)
        //  } else {
        // //     //否则,鼠标在这个模块中
        // //     //那就不删除
        // //     addEle.onclick = function (event) {
        // //         let newDiv = document.createElement("div")
        // //         //获取当前对象的位置
        // //         var addDivX = this.offsetLeft
        // //         var addDivY = this.offsetTop
        // //         newDiv.style.position = "absolute"
        // //         newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"
        // //         newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"
        // //         newDiv.style.width = 50 + "px"
        // //         newDiv.style.height = 30 + "px"
        // //         newDiv.style.background = "#00FF00"
        // //         newDiv.id = this.id.replace("AddId", "") + "NewDiv"
        // //         document.body.append(newDiv)
        // //     }
        // //     addEle.onmouseout = function (event) {
        // //         this.id.replace("AddId", "")
        // //         var divObj = document.getElementById(this.id.replace("AddId", ""));
        // //         var x = event.clientX;
        // //         var y = event.clientY;
        // //         var divx1 = divObj.offsetLeft;  //距离边界的距离
        // //         var divy1 = divObj.offsetTop; //距离边界的距离
        // //         var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离
        // //         var divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离
        // //         if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
        // //             //移出了divObj,删除add模块
        // //             document.body.removeChild(this)
        // //         } else {
        // //             //没移出divObj,不删除
        // //         }
        // //     }
        // }
    }


    // objs=document.getElementsByClassName("target")
    // for(var i in objs){
    //     //为每个div添加了add模块
    //     objs[i].onmouseover = function (){
    //         let add=document.createElement("div")
    //         add.style.position="absolute" //relative absolute
    //         add.style.left=this.offsetLeft+this.offsetWidth+"px"
    //         add.style.top=this.offsetTop+this.offsetHeight-30+"px"
    //         add.style.width=50+"px"
    //         add.style.height=30+"px"
    //         add.style.background="green"
    //         add.id=this.id+"AddId"
    //         add.innerHTML="create"
    //
    //         document.body.append(add)
    //
    //         // console.log("add图标的横坐标:"+add.style.left,"add图标的纵坐标:"+add.style.top)
    //         // console.log("大div的左上角坐标为:"+this.offsetLeft,this.offsetTop)
    //         // console.log("大div的宽度和高度是:"+this.offsetWidth,this.offsetHeight)
    //         // console.log("大div的右下角坐标为:"+(this.offsetLeft+this.offsetWidth),(this.offsetTop+this.offsetHeight))
    //         // console.log("小div的左上角坐标为:"+(this.offsetLeft+this.offsetWidth-10),(this.offsetTop+this.offsetHeight-10))
    //     }
    //     //当鼠标移出div模块时,add模块也随之消失;这里面有矛盾!
    //     //当鼠标移出div时,进入add模块后,add模块不应该消失
    //     //当鼠标移出div,并没有进入add模块时,add模块应该消失
    //         //关键点在于判断,移出div时,是否进入add模块
    //     objs[i].onmouseout=function(event){
    //         var addEle = document.getElementById(this.id+"AddId");
    //         var x=event.clientX;
    //         var y=event.clientY;
    //         var divx1 = addEle.offsetLeft;  //距离边界的距离
    //         var divy1 = addEle.offsetTop; //距离边界的距离
    //         var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离
    //         var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离
    //         if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
    //             //鼠标小于左上点横方向
    //             //鼠标大于右下点横方向
    //             //鼠标小于左上点竖方向
    //             //鼠标大于右下点竖方向
    //             //此时鼠标不在这个模块中
    //             //那就可以删除了
    //             document.body.removeChild(addEle)
    //         }else{
    //             //否则,鼠标在这个模块中
    //             //那就不删除
    //             addEle.onclick=function (event) {
    //                 let newDiv=document.createElement("div")
    //                 //获取当前对象的位置
    //                 var addDivX = this.offsetLeft
    //                 var addDivY = this.offsetTop
    //                 newDiv.style.position="absolute"
    //                 newDiv.style.left=this.offsetLeft+this.offsetWidth+"px"
    //                 newDiv.style.top=this.offsetTop+this.offsetHeight+30+"px"
    //                 newDiv.style.width=50+"px"
    //                 newDiv.style.height=30+"px"
    //                 newDiv.style.background="#00FF00"
    //                 newDiv.id=this.id.replace("AddId", "")+"NewDiv"
    //                 document.body.append(newDiv)
    //             }
    //             addEle.onmouseout=function (event) {
    //                 this.id.replace("AddId", "")
    //                 var divObj = document.getElementById(this.id.replace("AddId", ""));
    //                 var x=event.clientX;
    //                 var y=event.clientY;
    //                 var divx1 = divObj.offsetLeft;  //距离边界的距离
    //                 var divy1 = divObj.offsetTop; //距离边界的距离
    //                 var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离
    //                 var divy2 = divObj.offsetTop +  divObj.offsetHeight; //右下点距离边界的距离
    //                 if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
    //                     //移出了divObj,删除add模块
    //                     document.body.removeChild(this)
    //                 }else{
    //                     //没移出divObj,不删除
    //                 }
    //             }
    //         }
    //     }
    // }
</script>
</body>
</html>